import Vue from 'vue';
import VueRouter from 'vue-router';
import Film from '../views/Film.vue';
import Center from '../views/Center.vue';
import Cinema from '../views/Cinema.vue';
import nowplay from '../views/film/nowplay';
import comming from '../views/cinema/comming';
import login from '../views/login';
import FilmDetail from '../components/FilmDetail';
import city from '../components/CitySelection';
import SearchCinema from '../components/SearchCinema';

Vue.use(VueRouter);

const routes = [
  {
    path: 'searchCinema',
    name: 'searchCinema',
    component: SearchCinema,
  },
  {
    path: 'city',
    name: 'city',
    component: city,
  },
  {
    path: '/detail/:id',
    name: 'filmDetail',
    component: FilmDetail,
  },
  {
    path: '/film',
    component: Film,
    children: [
      {
        path: 'comming',
        name: 'comming',
        component: comming,
      },
      {
        path: 'now',
        name: 'film',
        component: nowplay,
      },
      {
        path: '',
        redirect: 'now',
      },
    ],
  },
  {
    path: '/login',
    name: 'login',
    component: login,
  },
  {
    path: '/cinema',
    name: 'cinema',
    component: Cinema,
  },
  {
    path: '/center',
    name: 'center',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    component: Center,
  },
  {
    path: '*',
    redirect: '/film',
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.name == 'center') {
    console.log(to.path);
    next({ name: 'login' });
  } else next();
});
export default router;
